<template>
  <div class="single-list-filter-wrapper" @click.stop="clickBlank()">
    <div class="top-text-wrapper" @click.stop="showSingleListDialog()">
      <p class="left-select-text">{{placeHolderText}}</p>
    </div>
    <div class="drop-down-wrapper" v-show="showDropDown">
      <ul class="ul-filter-list-wrapper">
        <!--<li>
          <div class="single-filter-object-all">
            <check-box :checkDataItem="{name:'全部',value:'all'}"></check-box>
          </div>
        </li>-->
        <li v-for="(item,index) in dataList">
          <div class="single-filter-object">
            <check-box :checkDataItem="item"></check-box>
          </div>
        </li>
      </ul>
      <div class="divider-line-filter"></div>
      <div class="confirm-btm-wrapper">
        <p class="single-confirm-btn" @click.stop="clickConfirm()">确定</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CheckBox from './check-box/check-box.vue'
  import {bus} from './js/bus.js';
  const TAG = 'singleListFilter'
  export default {
    components: {
      CheckBox
    },
    props: {
      singleListData: {
        type: Array,
        default() {
          return []
        }
      },
      defaultText: {
        type: String,
        default() {
          return '请选择'
        }
      },
     filter :{
        type: Object,
        default:null
     },
      type: {
        type: String,
        default: null
      }
    },
    created() {
      bus.$on('showDropDownDialog', (emitTag) => {
        if (emitTag == this._uid) {
          // 显示待选项
          this.showDropDown = !this.showDropDown
        } else {
          this.showDropDown = false
        }
      });
    },
    data() {
      return {
        placeHolderText: this.defaultText,
        currentSelectPosition: -1,
        showDropDown: false,
        dataList: []
      }
    },
    methods: {
      selectCurrentSingleObject(item, index) {
        // 选择列表项目
        this.placeHolderText = item.name
        this.currentSelectPosition = index
      },
      showSingleListDialog() {
        // 通过发送时间消息显示当前下拉框，关闭其他下拉框
        bus.$emit('showDropDownDialog', this._uid)
      },
      //点击确定是传回选中的id值
      clickConfirm() {
        let chooseList = [];
        this.dataList.map((item,index)=>{
          if(item.checked){
            chooseList.push(item.selectId)
          }
        })
        this.$emit('confirmSingleSelect', chooseList)
        this.showDropDown = false
      },
      clickBlank() {
      }
    },
    mounted(){
      document.querySelector('body').addEventListener("click", () => {
        this.showDropDown = false
      });
      let dataList = {};
      if(this.type=='insuredType'){
        dataList = this.filter.nc.insuredType;
      }else if(this.type=='hospLevel'){
        dataList = this.filter.nc.hospitalRankType;
      }
      this.dataList = dataList;
    }
  };
</script>

<style lang="scss">
  @import "topFilter.css";

</style>
